<div class="container">
    <div class="ui-g">
        <form [formGroup]="dictForm">
            <input type="hidden" formControlName="sysId">
            <input type="hidden" formControlName="dictId">
            <div class="ui-g-6">
                <div class="ui-g-4">名称<span style="color:red">*</span></div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="dictName" style="width:100%"
                        pTooltip="{{ formErrors.dictName }}" />
                </div>
            </div>
            <div class="ui-g-6">
                <div class="ui-g-4">编码<span style="color:red">*</span></div>
                <div class="ui-g-8">
                    <input pInputText type="text" formControlName="dictKey" style="width:100%"
                        pTooltip="{{ formErrors.dictKey }}" />
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-2">描述</div>
                <div class="ui-g-10">
                    <textarea pInputTextarea rows="3" formControlName="dictDesc" style="width:100%"></textarea>
                </div>
            </div>
        </form>
        <div class="ui-g-12" style="height:15px;">
            <div style="text-align: right;margin-top:-20px;">
                <button type="button" pButton class="ui-button-success button-small" icon="fa fa-plus"
                    (click)="addItem($event)" style="border-radius:50%"></button>
            </div>
        </div>

        <div class="ui-g-12">
            <p-table [value]="dictItems" [columns]="cols" scrollHeight="300px" scrollable="true">
                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th style="width:55px"></th>
                        <th *ngFor="let col of columns" [style.width]="col.width" [pSortableColumn]="col.field">
                            {{col.header}}
                            <p-sortIcon [field]="col.field"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-item>
                    <tr>
                        <td style="width:55px">
                            <button type="button" class="ui-button-danger button-small" pButton
                                (click)="deleteItem(item)" icon="fa fa-times"></button>
                        </td>
                        <td style="width:120px;text-align:center">{{item.seq}}</td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="rowData.dictItemName">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData.dictItemName}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="text" [(ngModel)]="rowData.dictItemValue">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData.dictItemValue}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td style="width:120px;text-align:center" pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input type="number" [(ngModel)]="rowData.displayOrder">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData.displayOrder}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
</div>
<div class="button-item">
    <button pButton type="text" class="ui-button-info" icon="fa fa-close" (click)="cancel()" label="取消"></button>
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="save()" label="保存"></button>
</div>